<template>
    <div>

        <ol>
            <li v-for="(item,index) in hobby" :key="item.id">{{ index }}{{ item.name }}</li>
        </ol>



        <table class="table table-bordered"> 
            <tbody>
                <tr class="bgcolor:red"> 
                    <td>编号</td>
                    <td>姓名</td>
                    <td>年龄</td>
                </tr>
                <tr v-for="item in date" :key="item.id" >
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.age }}</td>
                </tr>
            </tbody>
        </table>

    </div>
</template>

<script setup lang="ts">

import { ref,reactive } from 'vue';

let hobby=ref([
    {id:4,name:"张三",age:20},
    {id:1,name:"李四",age:20},
    {id:2,name:"王五",age:22},
    {id:3,name:"赵六",age:24},
]
    
)

let date=reactive([
    {id:1,name:"哈哈",age:20},
    {id:2,name:"李四",age:20},
    {id:3,name:"香炉",age:20},
    {id:4,name:"玱玹",age:20},
])





</script>

<style scoped>

</style>